<template>
	<view class="container" :style="{ overflow: isScrollDisabled ? 'hidden' : 'auto' }">
		<!-- <view class="nav" @tap="toHome()">
			<image src="/static/arrow-left.png"></image>
		</view> -->
		<!-- 设置项 -->
		<view class="settings">
			<!-- 设置区的标题 -->
			<view class="settings-title">设备列表</view>

			<!-- 各个设置项 -->
			<view class="setting-item-wrapper">
				<view class="setting-item" @click="navigateToAccessControl">
					<view class="text-container">
						<view class="setting-title">门禁开关</view>
						<view class="setting-sub">点击进入门禁控制</view>
					</view>
					<view class="image-container">
						<image src="/static/arrow-white.png" class="arrow-white"></image>
					</view>
				</view>
				<view class="setting-item" @click="navigateToAirConditioner">
					<view class="text-container">
						<view class="setting-title">空调设置</view>
						<view class="setting-sub">点击进入空调控制</view>
					</view>
					<view class="image-container">
						<image src="/static/arrow-white.png" class="arrow-white"></image>
					</view>
				</view>
			</view>
			<!-- <view class="setting-item-wrapper">
				<view class="setting-item" @click="navigateToLighting">
					<view class="text-container">
						<view class="setting-title">灯光设置</view>
						<view class="setting-sub">点击进入灯光控制</view>
					</view>
					<view class="image-container">
						<image src="/static/arrow-white.png" class="arrow-white"></image>
					</view>
				</view>
			</view> -->
		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				isScrollDisabled: true, // 默认禁用滚动
				activeSetting: 'gameMode', // 当前高亮的设置项
			};
		},
		components: {},
		onPageScroll() {
			if (this.isScrollDisabled) {
				// 停止页面滚动
				uni.pageScrollTo({
					scrollTop: 0, // 强制保持页面在顶部
					duration: 0,
				});
			}
		},
		onShow() {
			// this.$xyfun.setNavBg();
			uni.setNavigationBarColor({
				frontColor: '#ffffff',  
				backgroundColor: '#000',
			});
			this.css = this.$xyfun.css();
			// this.loadRoom();
		},
		methods: {
			toHome() {
				uni.navigateBack()
			},
			navigateToAccessControl() {
				// 跳转到门禁控制页面的逻辑
				uni.navigateTo({
					url: '/pages/store/room'
				})
			},
			navigateToAirConditioner() {
				// 跳转到空调控制页面的逻辑
				uni.navigateTo({
					url: '/pages/store/air'
				})
			},
			navigateToLighting() {
				// 跳转到灯光控制页面的逻辑
				uni.navigateTo({
					url: 'pages/store/light'
				})
			}
		}
	};
</script>

<style lang="scss" scoped>
	.container {
		display: flex;
		flex-direction: column;
		align-items: center;
		background-color: #000;
		color: #fff;
		padding: 20px;
		height: 100vh;
		overflow: hidden;
	}

	.nav {
		position: absolute;
		top: 20px;
		left: 10px;

		image {
			width: 25px;
			height: 25px;
		}
	}

	.settings {
		display: flex;
		flex-direction: column;
		width: 100%;
		margin-top: 40px;
	}

	.settings-title {
		font-size: 28rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 20rpx;
		text-align: left;
	}

	.setting-item-wrapper {
		display: flex;
		flex-wrap: no-wrap;
		justify-content: space-between;
		width: 100%;
		/* Ensure the container takes up the full width */
		margin-bottom: 20rpx;
	}

	.setting-item {
		width: 304rpx;
		/* Display two items per row */
		height: 112rpx;
		display: flex;
		flex-direction: row;
		// padding: 8px 16px;
		border-radius: 4px;
		cursor: pointer;
		justify-content: space-between;
		align-items: center;
		margin: 5px;
		/* To give some space between the items */
	}

	.text-container {
		display: flex;
		flex-direction: column;
	}

	.setting-title {
		font-size: 32rpx;
		font-weight: bold;
		color: #fff;
		margin-bottom: 10rpx;
	}

	.setting-sub {
		font-size: 20rpx;
		color: #ccc;
	}

	.image-container {
		display: flex;
		align-items: center;
		justify-content: center;
	}

	.arrow-white {
		width: 19rpx;
		height: 30rpx;
	}
</style>